<template>
  <div class="com-container"
       style="width:100%;height:100%">
    <div class="com-chart"
         style="width:100%;height:100%"
         ref="internet_ref"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartInstance: null,
      allData: null,
      isReady: false
    };
  },
  mounted () {
    this.initChart();
    this.isReady = true
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed () {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    //初始化echartInstance对象
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.internet_ref);
      const initOption = {
        xAxis: [{
          show: true,
          type: "category",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          interval: 100
        }],
        yAxis: {
          type: "value",
        },
      };
      this.chartInstance.setOption(initOption);
    },
    //获取服务器数据 后续接口获取数据方法处
    getData () {
      if (this.dashboardData = null) return
      let chartData = this.dashboardData.onlineNightProportion
      this.updataChart(chartData);
    },
    
   



    //更新图表
    updataChart (chartData) {
      const option = {
        title: {
          text: "深夜上网总人数",
          textStyle: {
            fontSize: 18,
            color: "rgba(255, 255, 255, 1)"
          },
          padding: [2, 2, 2, 2]
        },
        xAxis: {
          show: true,
          data: ["·深夜检测时段为\n23：30至次日6.30"],
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)"
          }
        }
        ,
        grid: [{
          top: 0,
          left: "3%",
          right: "6%",
          bottom: "2%",
          containLabel: true,
        }],

        series: [
          {
            type: "pie",
            radius: ["50%", "90%"],
            backgroundStyle: {
              color: "rgba(0, 0, 0, 1)"
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false
            },
            data: [
              {
                name: "100%",
                value: 1,
                itemStyle: {
                  color: "#769999"
                },
              },

            ],
          },
          {
            type: "pie",
            radius: ["50%", "90%"],
            backgroundStyle: {
              color: "rgba(0, 0, 0, 1)"
            },
            labelLine: {
              show: false,
            },
            // center:[],
            label: {
              position: "center",
            },
            data: [
              {
                name: chartData * 100 + '%',
                value: chartData,
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 1,
                      color: "rgb(201, 255, 16)",
                    },
                    {
                      offset: 0,
                      color: "rgb(224, 253, 255)",
                    },
                  ]),
                  borderRadius: "50%",
                },
              },
              {
                value: 1 - chartData,
                itemStyle: {
                  color: "transparent",
                },
              },
            ],
            areaStyle: {
              // color:new this.$echarts.graphic.LinearGradient(0,0,0,1,[
              //  {},
              //  {}
              // ])
            },
          }
        ],
      };
      this.chartInstance.setOption(option);
    },
    screenAdapter () {
      // const titleFontSize = (this.$refs.internet_ref.offsetWidth / 100) * 3.6;
      // const innerRadius = titleFontSize * 6;
      // const outterRadius = innerRadius * 1.8;
      // const adapterOption = {
      //   title: {

      //   },
      //   series: [
      //     {
      //       radius: [outterRadius, innerRadius],
      //       type: "pie",
      //       label: {
      //         fontSize: titleFontSize,
      //       },
      //     },
      //   ],
      // };
      // this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },

  }
  ,
  computed: {
    dashboardData () {
      return this.$store.state.dashBoardData
    }
  },
  watch: {
    dashboardData: {
      immediate: true,
      handler: function () {
        if (this.isReady) {
          this.getData();

        }

      }
    }
  }
};
</script>

<style>
</style>